<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>RadioButton MVC test</title>
		<style type="text/css">
			@import "../../../dijit/themes/claro/claro.css";
		</style>
		<script type="text/javascript" data-dojo-config="parseOnLoad:1,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../dojo/dojo.js"></script>
		<script type="text/javascript">
require([
	
    "dojo/ready",
    "dojo/parser",
    "dijit/registry",
    'dojox/mvc/at',
	"dojox/mvc/EditModelRefController",
	"dojox/mvc/getStateful",
	"dojo/Stateful",
	"dojox/mvc/Output",
    "dijit/form/RadioButton",
    "dijit/form/Button" // used for example purpose
], function(ready, parser, registry, at, EditModelRefController, getStateful, Stateful, RadioButton){
    var data = { selectedValue: "",
    		radio1Checked: false,
    		radio1Value: "Tea",
    		radio2Checked: false,
    		radio2Value: "Coffee",
    		radio3Checked: false,
    		radio3Value: "Coke",
    		radio4Checked: false,
			radio4Value: "Pepsi"
    };
	
	model = getStateful(data); 
	
	transformRadioChecked = {
				format: function(checked){
					return checked;
				},
				parse: function(checked){
					if(checked){
						model.set("selectedValue", this.target.value);
						console.log("in transformRadioChecked setting selectedValue to "+this.target.value);
					}
					return checked;
				}
			};
	
    ready(function(){
    	
        registry.byId("radio3").set("value", at(model, "radio3Value"));
        registry.byId("radio3").set("checked", at(model, "radio3Checked").transform(transformRadioChecked));
        registry.byId("radio4").set("value", at(model, "radio4Value"));
        registry.byId("radio4").set("checked", at(model, "radio4Checked").transform(transformRadioChecked));
        registry.byId("radio1").set("checked", true);
        
    });
});</script>
</head>
<body class="claro">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<h1>Bind MVC model to Radio buttons</h1>
	<h2>Bind the value, label and checked, and set selectedValue in the model.</h2>
	
    <form id="myform">
    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio1" 
    	data-dojo-props="value: at(model, 'radio1Value'), checked: at(model, 'radio1Checked').transform(transformRadioChecked)"/> 
    <label for="radio1" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio1Value')"></label> <br />
    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio2" 
    	data-dojo-props="value: at(model, 'radio2Value'), checked: at(model, 'radio2Checked').transform(transformRadioChecked)"/> 
    <label for="radio2" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio2Value')"></label> <br />
    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio3"/> 
    <label for="radio3" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio3Value')"></label> <br />
    <input type="radio" data-dojo-type="dijit/form/RadioButton" name="drink" id="radio4"/> 
    <label for="radio4" data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'radio4Value')"></label> <br />

</form>
<br />
    <label>Selected Value is:</label> <br />
    <div data-dojo-type="dojox/mvc/Output" data-dojo-props="value: at(model, 'selectedValue')"></div> <br />

</body>
</html>